<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>番茄时钟</title>
<style>
  body {
    font-family: 'Arial', sans-serif;
    background-color: #f4f4f4;
    color: #333;
    text-align: center;
    margin-top: 50px;
  }
  .timer {
    font-size: 48px;
    margin: 20px 0;
  }
  .config {
    margin: 10px 0;
  }
  button {
    padding: 10px 20px;
    margin: 5px;
    font-size: 18px;
    cursor: pointer;
    transition: transform 0.2s ease;
  }
  button:active {
    transform: scale(0.95);
  }
  .session-count {
    margin-top: 20px;
  }
</style>
</head>
<body>
<h1>番茄时钟</h1>
<div id="timer" class="timer">25:00</div>
<div class="config">
  <label for="pomodoro">番茄时间（分钟）:</label>
  <input type="number" id="pomodoro" value="25">
  <label for="shortBreak">短休息（分钟）:</label>
  <input type="number" id="shortBreak" value="5">
  <label for="longBreak">长休息（分钟）:</label>
  <input type="number" id="longBreak" value="15">
</div>
<button id="start">开始</button>
<button id="pause">暂停</button>
<button id="reset">重置</button>
<div class="session-count">完成的番茄钟轮数: <span id="sessionCount">0</span></div>

<script>
const timerDisplay = document.getElementById('timer');
const startButton = document.getElementById('start');
const pauseButton = document.getElementById('pause');
const resetButton = document.getElementById('reset');
const pomodoroInput = document.getElementById('pomodoro');
const shortBreakInput = document.getElementById('shortBreak');
const longBreakInput = document.getElementById('longBreak');
const sessionCountDisplay = document.getElementById('sessionCount');

let pomodoroTime = parseInt(pomodoroInput.value, 10) * 60;
let shortBreakTime = parseInt(shortBreakInput.value, 10) * 60;
let longBreakTime = parseInt(longBreakInput.value, 10) * 60;
let sessionCount = 0;
let timerId;
let remainingTime = pomodoroTime;
let isRunning = false;
let isBreak = false;

function updateDisplay(time) {
  const minutes = Math.floor(time / 60);
  const seconds = time % 60;
  timerDisplay.textContent = `${minutes}:${seconds < 10 ? '0' : ''}${seconds}`;
}

function startTimer() {
  if (!isRunning) {
    isRunning = true;
    timerId = setInterval(() => {
      remainingTime -= 1;
      updateDisplay(remainingTime);
      if (remainingTime <= 0) {
        clearInterval(timerId);
        isRunning = false;
        notifyUser();
        if (isBreak) {
          startPomodoro();
        } else {
          sessionCount += 1;
          sessionCountDisplay.textContent = sessionCount;
          if (sessionCount % 4 === 0) {
            startLongBreak();
          } else {
            startShortBreak();
          }
        }
      }
    }, 1000);
  }
}

function pauseTimer() {
  if (isRunning) {
    clearInterval(timerId);
    isRunning = false;
  }
}

function resetTimer() {
  clearInterval(timerId);
  isRunning = false;
  remainingTime = pomodoroTime;
  isBreak = false;
  updateDisplay(remainingTime);
}

function startPomodoro() {
  remainingTime = pomodoroTime;
  isBreak = false;
  updateDisplay(remainingTime);
  startTimer();
}

function startShortBreak() {
  remainingTime = shortBreakTime;
  isBreak = true;
  updateDisplay(remainingTime);
  startTimer();
}

function startLongBreak() {
  remainingTime = longBreakTime;
  isBreak = true;
  updateDisplay(remainingTime);
  startTimer();
}

function notifyUser() {
  if (Notification.permission === "granted") {
    new Notification(isBreak ? "休息时间结束，开始工作！" : "工作时间结束，开始休息！");
  }
}

startButton.addEventListener('click', startTimer);
pauseButton.addEventListener('click', pauseTimer);
resetButton.addEventListener('click', resetTimer);

pomodoroInput.addEventListener('change', function() {
  pomodoroTime = parseInt(this.value, 10) * 60;
  if (!isBreak) {
    resetTimer();
  }
});

shortBreakInput.addEventListener('change', function() {
  shortBreakTime = parseInt(this.value, 10) * 60;
});

longBreakInput.addEventListener('change', function() {
  longBreakTime = parseInt(this.value, 10) * 60;
});

// 请求通知权限
if (Notification.permission !== "granted") {
  Notification.requestPermission();
}

updateDisplay(pomodoroTime);
</script>
</body>
</html>
